import {
  PageHeader,
  Tabs,
  Statistic,
  Descriptions,
  Card,
  Row,
  Col,
  Table,
  Typography,
} from "antd";
import React, { Component } from "react";
import { Inquirydetail } from "../../../services/auth";

const { Text } = Typography;
const { TabPane } = Tabs;
const Content = ({ children, extra }) => (
  <div className="content">
    <div className="main">{children}</div>
    <div className="extra">{extra}</div>
  </div>
);
const columns = [
  {
    title: "产品编号",
    dataIndex: "goods_id",
    key: "goods_id",
    align: "center",
  },
  {
    title: "产品名称",
    dataIndex: "goods_name",
    key: "goods_name",
    align: "center",
  },
  {
    title: "订货数量",
    dataIndex: "quantity",
    key: "quantity",
    align: "center",
  },
  {
    title: "产品定价（件/元）",
    dataIndex: "price",
    key: "price",
    align: "center",
  },
  {
    title: "订单转化率",
    dataIndex: "trans_rate",
    key: "trans_rate",
    align: "center",
  },
  {
    title: "产品期望价格（件/元）",
    dataIndex: "expectprice",
    key: "expectprice",
    align: "center",
  },
];

export default class InquiryDetail extends Component {
  constructor(props) {
    super(props);
    this.state = {
      data: {}, //询价单整体
      dataSource: [], //商品列表
    };
  }
  componentWillMount() {
    const { value } = this.props;
    Inquirydetail(value.id).then(
      (response) => {
        console.log(response.data); ////查看后台数据
        this.setState({
          data: response.data,
          dataSource: response.data.goods,
        });
      },
      (error) => {
        console.log("失败了", error);
      }
    );
  }
  render() {
    const { data, dataSource } = this.state;
    return (
      <PageHeader
        className="site-page-header-responsive"
        title={`编号：${data.id}`}
        footer={
          <Tabs defaultActiveKey="1">
            <TabPane tab="详情展示" key="1">
              <Card bordered={false}>
                <Table
                  dataSource={dataSource}
                  columns={columns}
                  pagination={false}
                  size="small"
                  rowKey={(record) => record.goods_id}
                  bordered
                  summary={(pageData) => {
                    let totalQuatity = 0;
                    let totalPrice = 0;
                    let totalExpectprice = 0;

                    pageData.forEach(({ quantity, price, expectprice }) => {
                      totalQuatity += quantity * 1;
                      totalPrice += quantity * price;
                      totalExpectprice += quantity * expectprice;
                    });
                    return (
                      <Table.Summary.Row>
                        <Table.Summary.Cell align="center">
                          合计
                        </Table.Summary.Cell>
                        <Table.Summary.Cell />
                        <Table.Summary.Cell align="center">
                          <Text>{totalQuatity}</Text>
                        </Table.Summary.Cell>
                        <Table.Summary.Cell align="center">
                          <Text>{totalPrice}</Text>
                        </Table.Summary.Cell>
                        <Table.Summary.Cell />
                        <Table.Summary.Cell align="center">
                          <Text>{totalExpectprice}</Text>
                        </Table.Summary.Cell>
                      </Table.Summary.Row>
                    );
                  }}
                />
              </Card>
            </TabPane>
          </Tabs>
        }
      >
        <Content
          extra={
            <div>
              <br />
              <Card bordered={false} bodyStyle={{ paddingLeft: "0px" }}>
                <Row gutter={16}>
                  <Col span={3}>
                    <Statistic title="状态" value={data.status} />
                  </Col>
                  <Col span={5}>
                    <Statistic
                      title="期望总价"
                      value={data.totalExpectprice}
                      prefix="￥"
                      valueStyle={{ color: "#cf1322" }}
                    />
                  </Col>
                </Row>
              </Card>
            </div>
          }
        >
          <Descriptions size="default" column={2} bordered>
            <Descriptions.Item
              label="公司编号"
              contentStyle={{ fontWeight: "bold" }}
            >
              {data.company_id}
            </Descriptions.Item>
            <Descriptions.Item
              label="公司名称"
              contentStyle={{ fontWeight: "bold" }}
            >
              {data.company_name}
            </Descriptions.Item>
            <Descriptions.Item
              label="操作员编号"
              contentStyle={{ fontWeight: "bold" }}
            >
              {data.agent_id}
            </Descriptions.Item>
            <Descriptions.Item
              label="操作员名称"
              contentStyle={{ fontWeight: "bold" }}
            >
              {data.agent_name}
            </Descriptions.Item>
            <Descriptions.Item
              label="询价日期"
              contentStyle={{ fontWeight: "bold" }}
            >
              {data.valid_from}
            </Descriptions.Item>
            <Descriptions.Item
              label="询价有效期至"
              contentStyle={{ fontWeight: "bold" }}
            >
              {data.valid_to}
            </Descriptions.Item>
            <Descriptions.Item
              label="预计送达日期"
              contentStyle={{ fontWeight: "bold" }}
            >
              {data.req_deliv_date}
            </Descriptions.Item>
            <Descriptions.Item
              label="预计送货地点"
              contentStyle={{ fontWeight: "bold" }}
            >
              {data.ship_to_address}
            </Descriptions.Item>
          </Descriptions>
        </Content>
      </PageHeader>
    );
  }
}
